<template>
  <div class="waterAnalysis">
    <!-- 运行分析/水厂分析 -->
    <!-- 左侧树状结构 -->
    <!-- 小区 -->
    <!-- <button
      class="leftTreetitleButton"
      @click="treeShowOrClose = !treeShowOrClose"
      v-if="!treeShowOrClose"
    >
      <i class="el-icon-caret-right"></i>
    </button> -->

    <div class="leftTree" v-if="treeShowOrClose">
      <areaLeftTree class="waterMeterLeftTree" @getSearch="getSearch" />
    </div>
    <!-- 右侧内容 -->
    <div
      :class="[
        { rightcontant: treeShowOrClose },
        { rightcontant2: !treeShowOrClose },
      ]"
    >
      <div class="right-tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="设备统计" name="shebei">
            <deviceStatistics
              :nodeData="nodeData"
              v-if="activeName === 'shebei'"
            ></deviceStatistics>
          </el-tab-pane>
          <el-tab-pane label="水质分析" name="shuizhi">
            <WaterQuality
              v-if="activeName === 'shuizhi'"
            ></WaterQuality>
          </el-tab-pane>
          <el-tab-pane label="水压分析" name="shuiya">
            <waterHydraulic v-if="activeName === 'shuiya'">
            </waterHydraulic
          ></el-tab-pane>
          <el-tab-pane label="消耗产出" name="xiaohao">
            <waterConsume v-if="activeName === 'xiaohao'"
          ></waterConsume
          ></el-tab-pane>
          <el-tab-pane label="运营报表" name="yunying">
            <waterStatement v-if="activeName === 'yunying'"
          ></waterStatement>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import areaLeftTree from "@/views/pumpAnaly/components/areaLeftTree"; // 区域树
import deviceStatistics from "./deviceStatistics"; // 设备统计模板
import WaterQuality from "./WaterQuality"; // 水质分析模板
import waterHydraulic from "./waterHydraulic"; // 水质分析模板
import waterConsume from "./waterConsume"; // 消耗产出模板
import waterStatement from "./waterStatement"; // 运营报表模块

export default {
  components: {
    areaLeftTree,
    deviceStatistics,
    WaterQuality,
    waterHydraulic,
    waterConsume,
    waterStatement,
  },

  data() {
    return {
      treeShowOrClose: true,
      nodeData: '', // 检测点数据
      emptyType: 0,
      activeName: "shebei",
    };
  },
  methods: {
    // clickClose(res) {
    //   // console.log(res,999);
    //   if (res === "点击隐藏") {
    //     this.treeShowOrClose = false;
    //   }
    // },
    // 左侧小区条件----------------------
    getSearch(e) {
      this.nodeData = e;
    },

    handleClick(tab, event) {
      // console.log(this.activeName);
    },
  },
};
</script>

<style lang="scss" scoped>
.waterAnalysis {
  display: flex;

  .leftTreetitleButton {
    margin-top: 10px;
    border: 0;
    height: 32px;
  }
  .leftTree {
    width: 14.2%;
    // border-right: 1px solid #e6e6e6;
    // border-bottom: 1px solid #e6e6e6;
    .waterMeterLeftTree {
      border: 1px soild #ccc;
    }
  }
  .rightcontant {
    width: 85.8%;
  }
  .rightcontant2 {
    width: 97%;
  }
  .right-tabs {
    margin-left: 20px;
    height: 100%;
    .box-card {
      height: 100%;
    }
  }
}
</style>
